<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="tabClick">
      <el-tab-pane label="部门管理" name="dept">
        <el-container>
          <el-header>
            <el-form :inline="true" :model="dataForm">
              <el-form-item label="请选择部门" prop="deptId">
                <el-cascader
                  :show-all-levels="false"
                  placeholder="点击选择上级部门"
                  :options="deptList"
                  style="width: 100%"
                  v-model="dataForm.deptId"
                  :props="deptListTreeProps"
                  clearable
                  filterable
                />
              </el-form-item>
              <el-form-item label="请输入时间">
                <el-date-picker
                  v-model="sTime"
                  type="daterange"
                  value-format="yyyy-MM-dd 00:00:00"
                  align="right"
                  unlink-panels
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="getdeptSta(1)" icon="el-icon-search">查询</el-button>
                <el-button type="primary" @click="_export(1)" icon="el-icon-s-promotion">导出</el-button>
              </el-form-item>
            </el-form>
          </el-header>
        </el-container>
        <el-table
          v-loading="loading"
          :data="tableData"
          border
          style="width: 100%">
          <el-table-column label="部门信息" align="center">
            <el-table-column align="center" type="index" header-align="center" width="80px" label="序号" fixed/>
            <el-table-column prop="deptName" align="center" label="部门"/>
            <el-table-column prop="deptUserCount" align="center" label="部门人数"/>
          </el-table-column>
          <el-table-column label="综合积分" align="center">
            <el-table-column prop="deptSumGrade" align="center" label="总积分"/>
            <el-table-column prop="deptAvgGrade" align="center" label="平均分"/>
<!--            <el-table-column prop="rank" align="center" label="名次"/>-->
            <el-table-column label="名次" width="100" type="index" align="center">
              <template slot-scope="scope">
                <span>{{scope.$index+(pageIndex - 1) * pageSize + 1}}</span>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="积分详请" align="center">
            <el-table-column prop="loginGrade" align="center" label="登录积分"/>
            <el-table-column prop="newsGrade" align="center" label="新闻积分"/>
            <el-table-column prop="noticeGrade" align="center" label="公告积分"/>
            <el-table-column prop="examGrade" align="center" label="考试"/>
            <el-table-column prop="answerGrade" align="center" label="答题"/>
            <el-table-column prop="courseGrade" align="center" label="课程积分">
              <template slot-scope="scope">
                <el-tooltip class="item" placement="top" effect="light">
                  <div slot="content" style="width: 80px;">
                    <span>图片积分:{{scope.row.courseImgGrade}}</span><br/>
                    <span>视频积分:{{scope.row.courseVideoGrade}}</span><br/>
                    <span>考试积分:{{scope.row.courseExamGrade}}</span><br/>
                    <span>文件积分:{{scope.row.courseFileGrade}}</span><br/>
                    <span>课程积分:{{scope.row.courseSelfGrade}}</span><br/>
                  </div>
                  <el-tag>{{scope.row.courseSelfGrade}}</el-tag>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="参与情况" align="center">
            <el-table-column prop="trainGrade" align="center" label="参与状态">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.nonpart == true">参与</el-tag>
                <el-tag v-else type="danger">不参与</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="nonpart" align="center" label="参与/不参与">
              <template slot-scope="scope">
                <!--              <span v-if="scope.row.nonpart == true">参与</span>-->
                <!--              <span v-else>不参与</span>-->
                <el-switch
                  @change="participate(scope.$index)"
                  v-model="scope.row.nonpart"
                  :active-value="true"
                  :inactive-value="false"
                  active-color="#13ce66"
                  inactive-color="#ff4949">
                </el-switch>
              </template>
            </el-table-column>
          </el-table-column>

        </el-table>
        <el-pagination
          @size-change="sizeChangeHandle"
          @current-change="currentChangeHandle"
          :current-page="pageIndex"
          :page-sizes="[10, 20, 50]"
          :page-size="pageSize"
          :total="totalPage"
          layout="total, sizes, prev, pager, next, jumper"
        ></el-pagination>
      </el-tab-pane>
      <el-tab-pane label="个人管理" name="user" @click="getuserSta()">
        <el-container>
          <el-header>
            <el-form :inline="true" :model="dataForm">
              <el-form-item label="请选择部门" prop="deptId">
                <el-cascader
                  :show-all-levels="false"
                  placeholder="点击选择上级部门"
                  :options="deptList"
                  style="width: 100%"
                  v-model="dataForm.deptId"
                  :props="deptListTreeProps"
                  clearable
                  filterable
                />
              </el-form-item>
              <el-form-item label="姓名">
                <el-input v-model="dataForm.realname" placeholder="请输入姓名" clearable/>
              </el-form-item>
              <el-form-item label="请输入时间">
                <el-date-picker
                  v-model="sTime"
                  type="daterange"
                  value-format="yyyy-MM-dd 00:00:00"
                  align="right"
                  unlink-panels
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="getuserSta(1)" icon="el-icon-search">查询</el-button>
                <el-button type="primary" @click="_export(2)" icon="el-icon-s-promotion">导出</el-button>
              </el-form-item>
            </el-form>
          </el-header>
        </el-container>
        <el-table
          v-loading="loading"
          :data="userList"
          border
          style="width: 100%">
          <el-table-column label="个人信息" align="center">
            <el-table-column align="center" type="index" header-align="center" width="80px" label="序号"/>
            <el-table-column prop="realname" align="center" label="姓名"/>
            <el-table-column prop="deptName" align="center" label="部门"/>
          </el-table-column>
          <el-table-column label="综合积分" align="center">
            <el-table-column prop="userSumGrade" align="center" label="总积分"/>
<!--            <el-table-column prop="rank" align="center" label="名次"/>-->
            <el-table-column label="名次" width="100" type="index" align="center">
              <template slot-scope="scope">
                <span>{{scope.$index+(page - 1) * limit + 1}}</span>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="积分详情" align="center">
            <el-table-column prop="loginGrade" align="center" label="登录积分"/>
            <el-table-column prop="newsGrade" align="center" label="新闻积分"/>
            <el-table-column prop="noticeGrade" align="center" label="公告积分"/>
            <el-table-column prop="examGrade" align="center" label="考试"/>
            <el-table-column prop="answerGrade" align="center" label="答题"/>
<!--            <el-table-column prop="trainGrade" align="center" label="课程积分"/>-->
            <el-table-column prop="courseGrade" align="center" label="课程积分">
              <template slot-scope="scope">
                <el-tooltip class="item" placement="top" effect="light">
                  <div slot="content" style="width: 80px;">
                    <span>图片积分:{{scope.row.courseImgGrade}}</span><br/>
                    <span>视频积分:{{scope.row.courseVideoGrade}}</span><br/>
                    <span>考试积分:{{scope.row.courseExamGrade}}</span><br/>
                    <span>文件积分:{{scope.row.courseFileGrade}}</span><br/>
                    <span>课程积分:{{scope.row.courseSelfGrade}}</span><br/>
                  </div>
                  <el-tag>{{scope.row.courseSelfGrade}}</el-tag>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column align="center" label="参与情况">
            <el-table-column label="参与状态" align="center">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.nonpart == true">参与</el-tag>
                <el-tag v-else type="danger">不参与</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="nonpart" align="center" label="参与/不参与">
              <template slot-scope="scope">
                <el-switch
                  @change="userparticipate(scope.$index)"
                  v-model="scope.row.nonpart"
                  :active-value="true"
                  :inactive-value="false"
                  active-color="#13ce66"
                  inactive-color="#ff4949">
                </el-switch>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="sizeChangeHandles"
          @current-change="currentChangeHandles"
          :current-page="page"
          :page-sizes="[10, 20, 50]"
          :page-size="limit"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
        ></el-pagination>
      </el-tab-pane>
    </el-tabs>
    <exportintegral ref="exportIntegral"></exportintegral>
  </div>
</template>

<script>
  import Exportintegral from '../../../components/integral/exportintegral'

  export default {
    name: 'integral',
    components: {Exportintegral},
    data() {
      return {
        activeName: 'dept',
        tableData: [],
        userList: [],
        pageIndex: 1,
        pageSize: 10,
        sTime: [],
        deptList: [],
        dataForm: {
          deptId: '',
          startTime: '',
          endTime: '',
          realname: ''
        },
        loading: true,
        page: 1,
        limit: 10,
        total: 0,
        totalPage: 0,
        deptListTreeProps: {
          checkStrictly: true,
          expandTrigger: 'hover',
          label: 'name',
          value: 'id',
          children: 'children',
          emitPath: false
        }
      }
    },
    mounted() {
      this.getdeptSta()
      this.getDeptList()
    },
    methods: {
      tabClick({name}) {
        this.sTime = []
        this.dataForm = {
          deptId: '',
          startTime: '',
          endTime: '',
          realname: ''
        }
        if (name === 'dept') {
          this.getdeptSta(1)
        } else {
          this.getuserSta(1)
          // this.getUsercenterList(1)
        }
      },
      participate(index) {
        let row = this.tableData[index]
        this.$http({
          url: this.$http.adornUrl('/integral-admin/integral/sta/nonpartdept'),
          method: 'post',
          data: {
            deptId: row.deptId,
            flag: !!row.nonpart
          }
        }).then(res => {
          // eslint-disable-next-line eqeqeq
          if (res.code == 200) {
            this.getdeptSta()
          }
          // this.deptList = treeDataTranslate(
          //   res.data.filter(item => item.parentId !== -1),
          //   'id'
          // )
        })
      },
      userparticipate(index) {
        let row = this.userList[index]
        console.log(row)
        this.$http({
          url: this.$http.adornUrl('/integral-admin/integral/sta/nonpartuser'),
          method: 'post',
          data: {
            userId: row.userId,
            flag: !!row.nonpart
          }
        }).then(res => {
          // eslint-disable-next-line eqeqeq
          if (res.code == 200) {
            this.getuserSta()
          }
          // this.deptList = treeDataTranslate(
          //   res.data.filter(item => item.parentId !== -1),
          //   'id'
          // )
        })
      },
      async getdeptSta(page) {
        if (page) this.pageIndex = page
        if (this.sTime && this.sTime.length) {
          this.dataForm.startTime = `${this.sTime[0]}`
          this.dataForm.endTime = `${this.sTime[1]}`
        } else {
          this.dataForm.startTime = ''
          this.dataForm.endTime = ''
        }
        this.$http({
          url: this.$http.adornUrl('/integral-admin/integral/sta/deptSta'),
          method: 'post',
          data: {
            page: this.pageIndex,
            limit: this.pageSize,
            deptId: this.dataForm.deptId,
            startTime: this.dataForm.startTime,
            endTime: this.dataForm.endTime
          }
        }).then(res => {
          // eslint-disable-next-line eqeqeq
          if (res.code == 200) {
            this.loading = false
            this.tableData = res.data.list
            this.totalPage = res.data.totalCount
          }

          // this.deptList = treeDataTranslate(
          //   res.data.filter(item => item.parentId !== -1),
          //   'id'
          // )
        })
      },
      async getuserSta(page) {
        this.loading = true
        if (page) this.page = page
        if (this.sTime && this.sTime.length) {
          this.dataForm.startTime = `${this.sTime[0]}`
          this.dataForm.endTime = `${this.sTime[1]}`
        } else {
          this.dataForm.startTime = ''
          this.dataForm.endTime = ''
        }
        this.$http({
          url: this.$http.adornUrl('/integral-admin/integral/sta/userSta'),
          method: 'post',
          data: {
            page: this.page,
            limit: this.limit,
            deptId: this.dataForm.deptId,
            startTime: this.dataForm.startTime,
            endTime: this.dataForm.endTime,
            realname: this.dataForm.realname
          }
        }).then(res => {
          // eslint-disable-next-line eqeqeq
          if (res.code == 200) {
            this.loading = false
            this.userList = res.data.list
            this.total = res.data.totalCount
          }
        })
      },
      // 获取部门列表
      async getDeptList() {
        this.$http({
          url: this.$http.adornUrl('/usercenter-admin/dept/list'),
          method: 'post'
        }).then(res => {
          this.deptList = res.data
          // this.deptList = this.deptList.splice(0, 1)
          // this.deptList = treeDataTranslate(res.data.filter(item => item.parentId !== -1), 'id')
        })
      },
      _export(val) {
        this.$nextTick(() => {
          this.$refs.exportIntegral.init(this.dataForm, val)
        })
      },
      sizeChangeHandle(val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getdeptSta()
      },
      currentChangeHandle(val) {
        this.pageIndex = val
        this.pageSize = 10
        this.getdeptSta()
      },
      sizeChangeHandles(val) {
        this.limit = val
        this.page = 1
        this.getuserSta()
      },
      currentChangeHandles(val) {
        this.page = val
        this.limit = 10
        this.getuserSta()
      }
    }
  }
</script>

<style scoped>
</style>


